<template>
    <page-container>
        <cu-custom slot="header" bgColor="bg-white" :isBack="true">
            <block slot="backText"></block>
            <block slot="content">申请</block>
        </cu-custom>

        <view slot="center">
            <image :src="$util.imgPath('banner.png')" style="width:100%;height:282rpx"></image>
            <!-- 身份信息 -->
            <view style="border-bottom:16rpx solid #eeee">
                <view class="flexRow item">
                    <view class="leftFont">
                        手机号码
                    </view>
                    <view class="centerInput">
                        <input type="number" maxlength="11" v-model='form.mobile' placeholder-style='color:#ACACAC' placeholder="请输入手机号码">
                    </view>

                </view>

                <view class="flexRow item">
                    <view class="leftFont">
                        验 证 码
                    </view>
                    <view class="centerInput">
                        <input type="number" maxlength="6" v-model='form.code' placeholder-style='color:#ACACAC' placeholder="请输入验证码">
                    </view>

                    <button class="code" :disabled="codeBtn" @click="getCode">{{dynacodeData.codeText}}</button>
                </view>

                <view class="flexRow item">
                    <view class="leftFont">
                        用 户 名
                    </view>
                    <view class="centerInput">
                        <input type="text" placeholder-style='color:#ACACAC' v-model='form.corp_nickname' placeholder="用作账号登录，设置后不可更">
                    </view>

                </view>
            </view>

            <!-- 注册类型 -->
            <view>
                <view class="flexRow item border">
                    <view class="leftFont">
                        注册类型
                    </view>
                    <view class="centerInput" @click="registerType">
                        <input disabled='false' type="text" v-model='form.corp_type' placeholder-style='color:#ACACAC' placeholder="请选择">
                    </view>

                    <text class="order-more iconfont iconright"></text>
                </view>

                <view class="flexRow item border">
                    <view class="leftFont">
                        公司名称
                    </view>
                    <view class="centerInput">
                        <input type="text" v-model='form.corp_name' placeholder-style='color:#ACACAC' placeholder="请输入公司名称">
                    </view>
                </view>

                <view class="border">
                    <view class="flexRow item">
                        <view class="leftFont" style="width:auto">
                            统一社会信用代码/纳税人识别号
                        </view>
                        <view class="jump" @click="example">查看示例</view>
                    </view>

                    <view class="flexRow item">
                        <view class="centerInput">
                            <input type="text" v-model='form.corp_code' placeholder-style='color:#ACACAC' placeholder="请输入相关代码">
                        </view>
                    </view>
                </view>

            </view>

            <!-- 选择协议 -->
            <view class="agreement">
                <image :src="$util.imgPath(`${form.select?'checke.png':'icon-checke.png'}`)" class="checke" @click="agreement">
                    <view>
                        我已阅读并同意
                    </view>
                    <view class="jump" @click="jump">《醒目购企业用户注册协议》</view>
            </view>

            <view>
                <button class="affirm" :disabled="submitBtn" @click="submit()">确认提交</button>
                <!--  <view class="flexRow" style="justify-content: center;">
                    <image src="/static/images/service.png" class="checke">
                        <view class="jump">
                            遇到问题？请联系客服
                        </view>
                </view> -->
            </view>
            <!-- 营业执照示例 -->
            <uni-popup ref="uniPopupExample" type="center" class="wap-floating" :maskClick="true">
                <image :src="$util.imgPath('license.png')">
            </uni-popup>

            <!-- 注册类型 -->
            <uni-popup ref="uniPopupRegisterType" type="bottom" class="wap-floating" :maskClick="true">
                <SelectType :data='type' @childFn="parentFn" />
            </uni-popup>
        </view>

    </page-container>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import SelectType from './components/SelectType.vue'
export default {
	data() {
		return {
			form: {
				mobile: '', // 手机号码
				code: '', // 验证码
				corp_nickname: '', // 用户昵称
				corp_type: '', // 企业类型
				corp_name: '', // 公司名称
				corp_code: '', // 信用代码
				select: false,
				key: ''
			},
			dynacodeData: { // 验证码
				seconds: 120,
				timer: null,
				codeText: '获取验证码',
				isSend: false
			},
			codeBtn: true, // 验证码按钮限制
			submitBtn: true, // 确认提交限制
			inputData: [
				{ name: '手机号码', placeholder: '' }
			],
			type: ['请选择', '军队', '政府机构', '公司']
		}
	},
	watch: {
		'form.mobile': {
			handler(val, oldVal) {
				if (!/^1[3456789]\d{9}$/.test(val)) {
					this.codeBtn = true
					return false
				}
				this.codeBtn = false
				console.log('b.c: ' + val, oldVal)
			}
		},
		'form': {
			handler(val) {
				let submitBtn = Object.values(val).every((item) => item != '')
				this.submitBtn = !submitBtn
			},
			deep: true // true 深度监听
		}
	},
	components: {
		uniPopup,
		SelectType
	},
	methods: {
		// 协议同意选择
		agreement() {
			this.form.select = !this.form.select
		},
		jump() {
			this.$util.redirectTo('/subpackage/enterprisePurchase/agreement')
		},
		// 示例弹窗
		example() {
			this.$refs.uniPopupExample.open()
		},
		// 注册类型 弹窗
		registerType() {
			this.$refs.uniPopupRegisterType.open()
		},
		// 注册类型的选择
		parentFn(i) {
			this.$refs.uniPopupRegisterType.close()
			this.form.corp_type = this.type[i]
			console.log(this.type[i])
		},
		// 获取验证码
		getCode() {
			if (this.dynacodeData.isSend) return
			this.dynacodeData.isSend = true
			this.codeBtn = true
			this.$request.mobileCode({ mobile: this.form.mobile }).then(res => {
				console.log(res)
				if (res.code == 0) {
					// 保存key 用于验证码提交
					this.form.key = res.data.key
					// 验证码倒计时
					this.dynacodeData.timer = setInterval(() => {
						if (this.dynacodeData.seconds == 0) {
							this.dynacodeData.isSend = false
							this.codeBtn = false
							this.dynacodeData.seconds = 120
							this.dynacodeData.codeText = '获取验证码'
							clearInterval(this.dynacodeData.timer)
							return
						}
						this.dynacodeData.seconds--
						this.dynacodeData.codeText = this.dynacodeData.seconds + 's后可重新获取'
					}, 1000)

				} else {
					this.dynacodeData.isSend = false
					this.codeBtn = false
					this.$util.showToast({ title: res.message })
				}
			})
		},
		/**
         * 内容提交
         */
		submit() {
			this.$request.companyAdd(this.form).then(res => {
				console.log(res)
				if (res.code == 0) {
					this.$util.showToast({ title: '提交成功' })
					this.$util.goBack()
				} else {
					this.$util.showToast({ title: res.message })
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.flexRow {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.item {
    justify-content: space-between;
    padding: 25px 12px 15px 12px;
}
.border {
    border-bottom: 1px solid #eee;
}
.leftFont {
    font-size: 28rpx;
    color: #222;
    font-family: PingFang SC;
    font-weight: bold;
    width: 140rpx;
    text-align: justify;
    text-align-last: justify;
    margin-right: 21rpx;
}
.centerInput {
    flex: 1;
}

.agreement {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 31rpx;
    margin-top: 52rpx;
    margin-bottom: 130rpx;
}
.checke {
    width: 30rpx;
    height: 30rpx;
    margin-right: 14rpx;
}
.code {
    background-color: #ffd332;
}
.jump {
    color: #f6380c;
    text-decoration: underline;
}
.affirm {
    background-color: #ffd332;
    height: 96rpx;
    line-height: 96rpx;
    font-size: 32rpx;
    border-radius: 100rpx;
    color: #fff;
    margin-bottom: 50rpx;
}
</style>
